<template>
  <view class="list-item">
    <view class="item-header flex align-center">
      <view class="flex-sub text-cut text-cut1"
        >订单号：{{ item.orderCode }}</view
      >
      <view>
        <text class="color2" v-if="item.taskStatus == 0">待接单</text>
        <text class="color3" v-else-if="item.taskStatus == 4">已完成</text>
        <text class="color3" v-else-if="item.taskStatus == 5">已终止</text>
        <text class="color1" v-else>进行中</text>
      </view>
    </view>
    <view class="item-middle">
      <view class="flex align-start item-step">
        <view class="item-check"></view>
        <view class="flex-sub item-right">
          <view class="item-title">
            <text>始发地</text>
            <text class="margin-left">{{ item.originName }}</text>
          </view>
          <view class="item-address"> 地址：{{ item.originAddress }} </view>
        </view>
        <view class="left-line"></view>
      </view>
      <view class="flex align-start item-step">
        <view class="item-check active"></view>
        <view class="flex-sub item-right">
          <view class="item-title">
            <text>目的地</text>
            <text class="margin-left">{{ item.destinationName }}</text>
          </view>
          <view class="item-address">
            地址：{{ item.destinationAddress }}
          </view>
          <!-- <view class="item-info">
            联系人：{{ item.contact }} {{ item.contactPhone }}
          </view> -->
        </view>
      </view>
    </view>
    <view class="item-bottom">
      <view class="item-info">派单时间：{{ item.createTime }}</view>
      <slot name="moreInfo"></slot>
      <view
        class="option-box flex align-center justify-end"
        v-if="showType != 2 && item.taskStatus != 4"
      >
        <slot name="optionBtn"></slot>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    showType: {
      type: Number,
      default: 1,
    },
    item: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {};
  },

  created() {},
  methods: {},
};
</script>

<style lang="scss" scoped>
.list-item {
  margin-bottom: 32rpx;
  background: #ffffff;
  border-radius: 18rpx;
  padding: 0 32rpx;

  .item-header {
    padding: 20rpx 0;
    font-size: 30rpx;
    color: #000000;
    border-bottom: 1rpx solid #efefef;

    .color1 {
      color: #fc880c;
    }

    .color2 {
      color: #138e57;
    }

    .color3 {
      color: #666668;
    }
  }

  .item-middle {
    padding: 30rpx 0;

    .item-step {
      position: relative;

      .left-line {
        height: calc(100% - 16rpx);
        width: 2rpx;
        background: #efefef;
        position: absolute;
        left: 7rpx;
        top: 31rpx;
      }

      .item-check {
        width: 16rpx;
        height: 16rpx;
        border-radius: 50%;
        background: #138e57;
        margin-right: 20rpx;
        margin-top: 15rpx;

        &.active {
          background: #fc880c;
        }
      }

      .item-right {
        .item-title {
          font-size: 34rpx;
          font-weight: bold;
          color: #000000;
        }

        .item-address {
          margin-top: 16rpx;
          color: #666668;
          font-size: 30rpx;
          margin-bottom: 16rpx;
        }
      }
    }
  }

  .item-info {
    color: #666668;
    font-size: 30rpx;
  }

  .item-bottom {
    border-top: 1rpx solid #efefef;
    padding: 20rpx 0 30rpx;

    .option-box {
      margin-top: 20rpx;
    }

    .item-info-sm {
      margin-top: 20rpx;
      color: #666668;
      font-size: 30rpx;
    }
  }
}
</style>
